<template>
    <div class="project-details-members">

      <el-table
        style="width: 100%"
        size="medium"
        :data="datas.member"
        border>
        <el-table-column
          align="center"
          prop="member_name"
          label="姓名">
        </el-table-column>
        <el-table-column
          align="center"
          prop="department_name"
          label="所属部门">
        </el-table-column>
        <el-table-column
          align="center"
          prop="project_roles"
          label="项目角色职责">
        </el-table-column>
        <el-table-column
          v-if="checkPerson() && !isDisable && (datas.status > 5 && datas.status != 52)"
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button size="medium" type="text" v-if="!scope.row.apply_status" @click="changeMember(scope.row.member_id)">更换成员</el-button>
            <span v-else class="changeTxt">已提交变更</span>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        v-if="dialogVisible"
        title="项目成员更换申请"
        :visible.sync="dialogVisible"
        width="500px"
        :before-close="handleClose">

        <el-form ref="ruleForm" :model="data" :rules="rules" class="demo-form-inline" label-width="120px" size="medium" label-position="left">

          <el-form-item label="变更原因" prop="description">
            <el-input v-model="data.description" type="textarea" :rows="2"></el-input>
          </el-form-item>

<!--          <el-form-item label="原项目成员">-->
<!--            <span>{{changeData.member_name}}</span>-->
<!--          </el-form-item>-->

          <el-form-item label="原项目成员">
            <el-select v-model="changeData.member_id" clearable @change="memberChange">
              <el-option
                v-for="item in changeMembers"
                :key="item.member_id"
                :label="item.member_name"
                :value="item.member_id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="所属部门" prop="department_id">
            <el-select v-model="data.department_id" @change="departmentChange">
              <el-option
                v-for="item in departments"
                :key="item.id"
                :label="item.department_name"
                :value="item.id">
              </el-option>
            </el-select>

          </el-form-item>

          <el-form-item label="成员姓名" prop="member_id">
            <div style="display: flex">
              <el-select v-model="data.member_id" @change="nameChange">
                <el-option
                  v-for="item in peoples"
                  :key="item.id"
                  :label="item.user_name"
                  :value="item.id">
                </el-option>
              </el-select>

              <div style="margin-left: 10px">
                <el-popover
                  placement="right-end"
                  width="400"
                  trigger="hover">
                  <div style="color: #666666">
                    <div>选择职员为非项目组成员，该成员自动加入项目组成员列表</div>
                    <div>旧成员进行中及未完成任务同时更换为新成员</div>
                  </div>
                  <i class="el-icon-warning-outline" slot="reference"></i>
                  <!--          <el-button icon="el-icon-warning-outline" slot="reference" circle></el-button>-->
                </el-popover>
              </div>

            </div>

          </el-form-item>

<!--          <el-form-item label="备注">-->
<!--            <el-input v-model="description"></el-input>-->
<!--          </el-form-item>-->

<!--          <el-form-item label="项目角色职责" prop="project_roles_id">-->
<!--            <el-select v-model="data.project_roles_id" @change="rolesChange">-->
<!--              <el-option-->
<!--                v-for="item in roles"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->

        </el-form>


        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmClick">确 定</el-button>
        </span>
      </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "members",
        props:{
            datas:{
                type:Object,
                default:function () {
                    return{
                        member:[]
                    }
                }
            },
            isDisable:{
                type: Boolean,
                default:function () {
                    return false
                }
            }
        },
        data:function () {
            return{
                memberData:[],
                dialogVisible:false,
                peoples:[],
                departments:[],
                roles:[
                    {
                        value:'1',
                        label:'组长'
                    },
                    {
                        value:'2',
                        label:'组员'
                    }
                ],
                description:'',
                data:{},
                rules: {
                    description: [
                        { required: true, message: '请输入变更原因', trigger: 'blur' }
                    ],
                    member_id: [
                        { required: true, message: '请选择成员', trigger: 'change' }
                    ],
                    department_id: [
                        { required: true, message: '请选择所属部门', trigger: 'change' }
                    ],
                    project_roles_id: [
                        { required: true, message: '请选择角色职责', trigger: 'change' }
                    ],
                },
                changeData:{},

                changeMembers:[],
            }
        },
        mounted:function(){
            this.departments = this.$store.getters.department
        },
        methods:{
            checkPerson:function(){
                if (this.datas.project_person_in_charge_id == this.$store.getters.userInfo.user.id){
                    return true
                }
                return false
            },
            handleClose:function(){
                this.dialogVisible = false;
            },
            changeMember:function (id) {

                this.changeMembers = [];
                this.datas.member.forEach(mem=>{
                    if (!mem.apply_status){
                        this.changeMembers.push({...mem})
                    }
                })

                let index = this.datas.member.findIndex(a=>a.member_id == id)
                if (index != -1){
                    let pro = this.datas.member[index];
                    this.changeData = {...pro};
                    this.data = {
                        name:'',
                        roles:'',
                        member_id: "",
                        member_name: "",
                        department_id: "",
                        department_name: "",
                        project_roles_id: pro.project_roles_id,
                        project_roles: pro.project_roles,
                        description:''
                    }
                    this.dialogVisible = true;
                }

            },
            confirmClick:function () {

                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {

                        let data = {
                            object_id:this.datas.id,
                            project_id:this.datas.id,
                            project_name:this.datas.project_name,
                            change_type:2,
                            reason_id:'',
                            reason:"",
                            description:this.data.description,
                            level_id:0,
                            level:"",
                            member_before:this.changeData,
                            member_after:this.data,
                        }

                        this.$api.PROJECT_START_CHANGE_CREATE(data).then(res=>{
                            if (res.code == 200){
                                this.$message.success("提交成功")
                                let index = this.datas.member.findIndex(a=>a.member_id == this.changeData.member_id)
                                if (index != -1){
                                    this.datas.member[index].apply_status = 1;
                                }
                            }else{
                                this.$message.error(res.msg)
                            }
                        })
                        this.description = "";
                        this.dialogVisible = false;
                    }
                });

            },
            nameChange:function (id) {
                let index = this.peoples.findIndex(a=>a.id == id);

                if (index != -1){
                    let data = this.peoples[index]

                    this.data.member_id = data.id + "";
                    this.data.member_name = data.user_name
                }
            },
            memberChange:function(id){
                if (id){
                    let index = this.changeMembers.findIndex(a=>a.member_id == id)
                    if (index != -1){
                        let mem = this.changeMembers[index];
                        this.changeData = {...mem}
                    }
                }else {
                    this.changeData = {}
                }
            },
            departmentChange:function (val) {

                let index = this.departments.findIndex(a=>a.id == val);

                if (index != -1){
                    let data = this.departments[index]

                    this.data.department_id = data.id + "";
                    this.data.department_name = data.department_name

                    this.data.member_id = "";
                    this.data.member_name = ''

                    let d = {
                        department_id:data.id,
                        limit:1000,
                        skip:1,
                        user_status:1
                    }
                    this.$api.GET_USER_LIST(d).then(res=>{
                        if (res.code == 200){
                            this.peoples = res.data.data;
                        }
                    })
                }
            },
            rolesChange:function (val) {

                let index = this.roles.findIndex(a=>a.value == val);

                if (index != -1){
                    let data = this.roles[index]

                    this.data.project_roles_id = data.value + "";
                    this.data.project_roles = data.label
                }
            },
        }
    }
</script>

<style lang="scss">
  @import "@/assets/scss/views/projectManagement/list/details/members.scss";
</style>
